<template>
	<view class="content">
		<!-- #ifdef H5 || APP-PLUS -->
		<view class="message-title">
			<commonTitle title="提现" :text="isshow" @goCashHistory="goCashHistory"></commonTitle>
		</view>
		<!-- #endif -->
		<view class="list-scroll-content">
			<!-- 提现类型 -->
			<view class="cash-w-type">
				<view class="cash-type-title">提现类型</view>
				<!-- <view class="type-block">
					<image src="../../../static/common/img02.png" class="type-cion"></image>
					<view class="type-info">
						<view class="text-one">
							<text class="color-yellow">提现</text>超级返返还资金
						</view>
						<view class="text-two">
							余额：¥{{accountInfo.daiTixian}}
						</view>
					</view>
					<image src="../../../static/common/cash-icon2.png" class="cash-icon2"></image>
				</view> -->
			</view>
			<view class="new-cash-type">
				<view class="benjin-container" @tap="cashType(0)">
					<image src="../../../static/common/benjin-cash.png" class="benjin-icon"></image>
					<image :src=" benjinSelected ? '../../../static/common/cash-yes.png' :'../../../static/common/cash-no.png'" class="secect-icon"></image>
					<view class="benjin-desc">
						<view class="text-benjin">超级返-本金</view>
						<view class="text-amount">余额：¥{{accountInfo.benjin}}</view>
					</view>
				</view>
				<view class="benjin-container" @tap="cashType(1)">
					<image src="../../../static/common/yongjin-cash.png" class="benjin-icon"></image>
						<image :src=" yongjinSelected ? '../../../static/common/cash-yes.png' :'../../../static/common/cash-no.png'" class="secect-icon"></image>
					<view class="benjin-desc">
						<view class="text-benjin">超级返-佣金</view>
						<view class="text-amount">余额：¥{{accountInfo.yongjin}}</view>
					</view>
				</view>
			</view>
			<!-- 收款支付宝 -->
			<view class="cash-w-type">
				<view class="cash-type-title">收款账号</view>
				<view class="zfb" @tap="openEdit">
					<view style="color:rgba(17,23,57,0.5);">{{accountInfo.bankCardNo?accountInfo.bankCardNo:"请点击绑定收款银行卡号"}}</view>
					<view class="edit-zfb" @tap="openEdit" v-if="accountInfo.bankCardNo">修改绑定</view>
				</view>
			</view>
			
			<!-- 提现金额 -->
			<view class="cash-w-type" style="margin-top: 30upx;">
				<view class="cash-type-title">提现金额</view>
				<view class="cush-num">
					<view class="cush-num-block"><input type="digit" 
					v-model="amount"
					placeholder="请输入提现金额" class="cash-input"/></view>
					<view class="cush-limit">
						<view class="limit-num">可提现余额{{count?count:'-'}}元</view>
						<view class="cash-all" @tap="allAmount">全部提现</view>
					</view>
					<view class="cash-tip">提现永久免手续费</view>
				</view>
			</view>
			<!-- 提现按钮 -->
			<view class="cash-btn" @tap="tixian">申请提现  预计1-2工作日到账</view>
		
		</view>
		
		<!-- 修改支付宝 -->
		<uni-popup ref="showshare" :type="type" @change="change">
			<view class="edit-block">
				<view class="edit-item">绑定收款账号</view>
				<view class="edit-item-chlid">
					<view class="child-title">收款银行</view>
					<!-- <input class="endit-input" type="text" placeholder="选择收款银行" v-model="bankName"/> -->
					<picker @change="bindPickerChange" :value="index" :range="array" style="width: 450upx;">
							<view class="uni-input" style="font-size: 13px;">{{array[index]}}</view>
					</picker>
				</view>
				<view class="edit-item-chlid">
					<view class="child-title">姓名</view>
					<input class="endit-input" type="text" placeholder="请输入你的姓名" v-model="bankCardName"/>
				</view>
				<view class="edit-item-chlid">
					<view class="child-title">卡号</view>
					<input class="endit-input" type="number" placeholder="请输入你的卡号" v-model="bankNo1"/>
				</view>
				<view class="edit-item-chlid">
					<view class="child-title">确认卡号</view>
					<input class="endit-input"  type="number" placeholder="请输入你的卡号" v-model="bankNo2"/>
				</view>
				<view class="edit-item-chlid">
					<view class="child-title">手机号</view>
					<input class="endit-input" type="number" placeholder="请输入你的手机号" v-model="phone"/>
				</view>
				<view class="edit-item-chlid getposi">
					<view class="child-title">验证码</view>
					<input class="endit-input" type="number" placeholder="请输入验证码" v-model="validateCode"/>
					<view class="getCode" @tap="getValidateCode">{{daojishi}}</view>
				</view>
				
			</view>
			<text class="uni-share-btn" @click="bindBank">绑定</text>
			<view style="width: 100%;height: 38upx;"></view>
		</uni-popup>
		
	</view>
</template>

<script>
	import commonTitle from'../../../components/sub-titile/title.vue'
	import uniPopup  from'../../../components/uni-popup/uni-popup.vue'
	const bank = require('../../../common/bank.js');
	export default{
		components:{
			commonTitle,
			uniPopup
		},
		data () {
			return {
				type: 'bottom',
				apptoken:"",
				accountInfo:"",
				amount:"",
				bankCardName:"",
				bankNo1:"",
				bankNo2:"",
				phone:"",
				validateCode:"",
				bankName:"",
				isSend:false,
				daojishi:"获取验证码",
				timer:null,
				isshow:true,
				cashtype:0,
				benjinSelected:true,
				yongjinSelected:false,
				count:"",
				array:"",
				index: 0,
			}
		},
		onLoad() {
			this.apptoken = uni.getStorageSync("apptoken");
			//获取用户可提现金额
			this.getAccountMoney();
			//获取绑定银行
			this.getBanks();
		},
		methods: {
			getBanks(){
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.bank_list,
					data:{ apptoken: this.apptoken },
					success(res) {
						console.log(res)
						if(res.data.success){
							res.data.data.unshift("请选择绑定银行")
							_this.array = res.data.data;
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			bindPickerChange: function(e) {
					console.log('picker发送选择改变，携带值为', e.target.value)
					this.index = e.target.value
					this.bankName = this.array[e.target.value];
			},
			cashType(type){
				if(type == 0){
					//本金
					this.cashtype = 0;
					this.yongjinSelected = false;
					this.benjinSelected = !this.benjinSelected;
					this.count = this.accountInfo.benjin;
				}else if(type == 1){
					//佣金
					this.cashtype = 1;
					this.benjinSelected = false;
					this.count = this.accountInfo.yongjin;
					this.yongjinSelected = !this.yongjinSelected;
				}
			},
			getValidateCode(){
				if(this.isSend){
					return;
				}
				const _this = this;
				if(!this.phone){
					this.$CommonJS.showToast("请输入银行预留手机号")
					return;
				}
				//_this.Dodaojishi();
				uni.request({
					url:this.$API.URL + this.$API.phoneGetvalidatecode,
					data:{apptoken:this.apptoken,phone:this.phone},
					success(res) {
						console.log(res)
						if(res.data.success){
							//_this.isSend = !_this.isSend;
							_this.Dodaojishi();
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			Dodaojishi(){
				//倒计时
				var num = 60;
				const _this = this;
			var timer = setInterval(function(){
					_this.daojishi = "重新发送"+num +"s";
					_this.isSend = true;
					num --;
					if(num < 0){
						clearInterval(timer);
						_this.isSend = false;
						_this.daojishi = "发送验证码"
						return;
					}
				},1000)
			},
			bindBank(){
				const _this = this;
				//绑定银行卡
				if(!this.bankName || this.bankName == "请选择绑定银行"){
					this.$CommonJS.showToast("请选择绑定银行")
					return;
				}
				if(!this.bankCardName){
					this.$CommonJS.showToast("请输入持卡人姓名")
					return;
				}
				if(!this.bankNo1){
					this.$CommonJS.showToast("请输入银行卡号")
					return;
				}
				if(!this.bankNo2){
					this.$CommonJS.showToast("请输入确认银行卡号")
					return;
				}
				if(!this.phone){
					this.$CommonJS.showToast("请输入银行预留手机号")
					return;
				}
				if(!this.validateCode){
					this.$CommonJS.showToast("请输入手机验证码")
					return;
				}
				if(!this.bankName){
					this.$CommonJS.showToast("请输入所属银行")
					return;
				}
				//var pattern = /^([1-9]{1})(\d{15}|\d{16}|\d{18})$/;
				var pattern = /^[0-9]{16,19}$/;
				this.bankNo1 = this.bankNo1.replace(/\s+/g, "");
				this.bankNo2 = this.bankNo2.replace(/\s+/g, "");
				console.log(this.bankNo1)
				console.log(pattern.test(this.bankNo1))
				if (pattern.test(this.bankNo1) == false) {
					this.$CommonJS.showToast('请正确输入银行卡号！');
				  return;
				}
				if(this.bankNo1 !== this.bankNo2){
					this.$CommonJS.showToast('两次输入的银行卡号不一致！');
					return;
				}
				
				console.log(bank.bankCardAttribution(this.bankNo1))
				const bankInfo = bank.bankCardAttribution(this.bankNo1);
				if(bankInfo.cardTypeName !== "储蓄卡"){
					this.$CommonJS.showToast("请输入储蓄卡号");
					return;
				}
				
				if(bankInfo.bankName.indexOf(this.bankName) == -1){
					console.log(this.bankName)
					this.$CommonJS.showToast("卡号和所属银行不匹配");
					return;
				}
				
				let data ={
					bankCardName:this.bankCardName,
					bankNo1:this.bankNo1,
					bankNo2:this.bankNo2,
					phone:this.phone,
					validateCode:this.validateCode,
					bankName:this.bankName,
					apptoken:this.apptoken
				}
				uni.request({
					url:this.$API.URL + this.$API.bound_bankcard,
					data:data,
					success(res){
						console.log(res);
						if(res.data.success){
							_this.accountInfo.bankCardNo = _this.bankNo1;
							uni.showToast({
								title:"银行卡绑定成功"
							});
					  	_this.validateCode = "",
							_this.cancel('share');
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			tixian(){
				//提现
				const _this = this;
				console.log(this.cashtype)
				if(this.cashtype == -1){
					uni.showModal({
						title:"温馨提示",
						content:"请先选择提现类型",
					})
					return;
				}
				if(!this.accountInfo.bankCardNo){
					uni.showModal({
						title:"温馨提示",
						content:"您还没有绑定银行卡,请先绑定银行卡",
						success(res) {
							if(res.confirm){
								_this.$refs.showshare.open();
							}
						}
					})
					return;
				}
				
				if(this.accountInfo.benjin<=0 && this.cashtype == 0){
					//本金提现
					uni.showModal({
						title:"温馨提示",
						content:"您当前账户本金暂无可提现余额,快去接单赚钱吧",
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'../../superBack/super-back'
								})
							}
						}
					})
					return;
				}
				if(this.accountInfo.yongjin<=0 && this.cashtype == 1){
					//佣金提现
					uni.showModal({
						title:"温馨提示",
						content:"您当前账户佣金暂无可提现余额,快去接单赚钱吧",
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'../../superBack/super-back'
								})
							}
						}
					})
					return;
				}
				if(50>this.accountInfo.yongjin>0 && this.cashtype == 1){
					//佣金提现
					uni.showModal({
						title:"温馨提示",
						content:"您当前账户佣金不足50元,暂时不能提现,快去挣更多钱吧",
						success(res) {
							if(res.confirm){
								uni.navigateTo({
									url:'../../superBack/super-back'
								})
							}
						}
					})
					return;
				}
				if(this.amount <=0|| !this.amount || this.amount > this.accountInfo.benjin && this.cashtype == 0){
					uni.showModal({
						title:"温馨提示",
						content:"请输入正确的本金提现金额"
					})
					return;
				}
				if(this.amount <=0|| !this.amount || this.amount > this.accountInfo.yongjin && this.cashtype == 1){
					uni.showModal({
						title:"温馨提示",
						content:"请输入正确的佣金提现金额"
					})
					return;
				}
				if(this.amount <50 && this.cashtype == 1){
					//佣金50元起提
					uni.showModal({
						title:"温馨提示",
						content:"佣金50元起提",
					})
					return;
				}
				uni.request({
					url:this.$API.URL + this.$API.tixian_apply,
					data:{apptoken:this.apptoken,amount:this.amount,tixianType:this.cashtype},
					success(res) {
						console.log(res);
						if(res.data.success){
							uni.showToast({
								title:"提交成功"
							})
							_this.amount = "";
						}else{
							_this.$CommonJS.showToast(res.data.msg)
						}
					}
				})
			},
			allAmount(){
				this.amount = "";
				if(this.cashtype == 0){
					this.amount = this.accountInfo.benjin;
				}else if(this.cashtype == 1){
					this.amount = this.accountInfo.yongjin;
				}
				
			},
			getAccountMoney(){
				//获取用户可提现金额
				const _this = this;
				uni.request({
					url:this.$API.URL + this.$API.user_revenue,
					data:{apptoken:this.apptoken},
					success(res) {
						console.log(res);
						if(res.data.success){
							_this.accountInfo = res.data.data;
							_this.bankCardName = res.data.bankCardName;
						}
					}
				})
			},
			goCashHistory(){
				//提现记录
				this.$CommonJS.navigateTo('../sub-cashHistory/sub-cashHistory');
			},
			openEdit(){
				 this.$refs.showshare.open()
			},
			cancel(type) {
				this.$refs['show' + type].close()
			},
			change(e) {
				console.log('是否打开:' + e.show)
			}
		}
		
	}
</script>

<style scoped>
	@import url("sub-cash.css");
</style>
